Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

214
Visualizações
How to handle uncaughtException in react and render a simple "internal bug" message to the UI?

On the node side,

// Event 'uncaughtException'
process.on('uncaughtException', (error, source) => {
   fs.writeSync(process.stderr.fd, error, source);
});

What is the equivalent of the above for the frontend with ReacT?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

The closest concept of uncoughtException in React is called "Error Boundaries":
https://reactjs.org/docs/error-boundaries.html

These elements will catch any rendering error which happen within their subtree.
Within the render method you can display some kind of "internal error" message.

about 4 years ago · Juan Pablo Isaza Relatório

0

React 16 introduced error boundaries via a class component lifecycle method: componentDidCatch, however there are some caveats that you should read about in the documentation below.

  • https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

componentDidCatch

/*
* Implementation
*/
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}


/*
* Usage
*/
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

react-error-boundary

However, instead of implementing the above, I'd highly suggest using something like react-error-boundary from Brian Vaughn.

It's flexible, allows for error recovery, and doesn't outwardly rely on any React lifecycle methods.

  • https://github.com/bvaughn/react-error-boundary
import {ErrorBoundary} from 'react-error-boundary'

const ErrorFallback = () => <div>Something went wrong</div>

const myErrorHandler = (error: Error, info: {componentStack: string}) => {
  // Do something with the error
  // E.g. log to an error logging client here
}

const ui = (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    <ComponentThatMayError />
  </ErrorBoundary>,
)
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda